<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>发现</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/mescroll.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/swiper-4.3.5.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/pages/discover.css" />
	</head>

	<body>
		<!--
		作者：1169774483@qq.com
		时间：2018-08-14
		描述：滑动后出现的头部
	-->
		<div class="header-fiexd" id="header" style="opacity: 0;">
			<!-- <div id="fiexd"></div> -->
			<div class="header-wapper">
				<div class="search">
					<span class="mui-icon mui-icon-search"></span>
					<span>搜索周边美食 / 娱乐</span>
				</div>
			</div>
		</div>

		<div class="loading-warpper" id="loading">
			<!-- <div class="loading">
				<div class="item1"></div>
				<div class="item2"></div>
			</div> -->
		</div>

		<div id="mescroll" class="mescroll">
			<div id="app" class="content">
				<!--
        头部
    -->
				<div v-show="isData">
					<div class="header-wapper">
						<!-- 搜索按钮 -->
						<div class="header-search">
							<div id="search"></div>
							<div class="search" @click="searchTap">
								<span class="mui-icon mui-icon-search"></span>
								<span>搜索周边美食 / 娱乐</span>
							</div>
						</div>
						<!-- 轮播模块 -->
						<div class="header-swiper">
							<div class="swiper-container">
								<div class="swiper-wrapper">
									<div class="swiper-slide" v-for="item in discover.firstList" @click="detailClick(item)">
										<img class="swiper-img" :imgurl="item.path" src="../images/jiazai.gif" />
									</div>
								</div>
								<!-- 如果需要分页器 -->
								<div class="swiper-pagination"></div>
							</div>
						</div>
					</div>
					<!--
						功能模块
					-->
					<div class="module-list">
						<div class="list-item" v-for="(item,index) in modules" @click="moreTap(index+1)">
							<div class="icon">
								<img :src="item.imgSrc">
							</div>
							<p class="title" v-text="item.title"></p>
						</div>
					</div>
					<!--
			功能分类展示
		-->
					<div class="mudule-class">
						<!-- 周边美食 -->
						<div>
							<div class="title-warpper">
								<span class="title">周边美食</span>
								<div class="more" @click="moreTap(1)">更多
									<span class="mui-icon mui-icon-forward"></span>
								</div>
							</div>
							<!-- 列表 -->
							<div class="list">
								<div class="list-item" v-for="item in discover.discoveryList_1" @click="detailClick(item)">
									<div class="item-warpper">
										<div class="item-image">
											<img :imgurl="item.path" src="../images/jiazai.gif">
										</div>
										<div class="item-desc">
											<span class="title" v-text="item.disName"></span>
											<div class="flex-sal">
												<img class="icon" src="../images/discover/huo.png">
												<span class="distance font-c-ad">{{item.distance | toFixed}}</span>
											</div>
											<div class="item-map">
												<img src="../images/map.png">
												<span class="font-12 font-c-ad">{{item.disDetails}}</span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- 休闲娱乐 -->
						<div>
							<div class="title-warpper">
								<span class="title">休闲娱乐</span>
								<div class="more" @click="moreTap(2)">更多
									<span class="mui-icon mui-icon-forward"></span>
								</div>
							</div>
							<!-- 列表 -->
							<div class="list">
								<div class="list-item" v-for="item in discover.discoveryList_2" @click="detailClick(item)">
									<div class="item-warpper">
										<div class="item-image">
											<img :imgurl="item.path" src="../images/jiazai.gif">
										</div>
										<div class="item-desc">
											<span class="title" v-text="item.disName"></span>
											<div class="flex-sal">
												<img class="icon" src="../images/discover/huo.png">
												<span class="distance font-c-ad">{{item.distance | toFixed}}</span>
											</div>
											<div class="item-map">
												<img src="../images/map.png">
												<span class="font-12 font-c-ad">{{item.disDetails}}</span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<!-- 周边健身 -->
						<div>
							<div class="title-warpper">
								<span class="title">游泳健身</span>
								<div class="more" @click="moreTap(3)">更多
									<span class="mui-icon mui-icon-forward"></span>
								</div>
							</div>
							<!-- 列表 -->
							<div class="list">
								<div class="list-item" v-for="item in discover.discoveryList_3" @click="detailClick(item)">
									<div class="item-warpper">
										<div class="item-image">
											<img :imgurl="item.path" src="../images/jiazai.gif">
										</div>
										<div class="item-desc">
											<span class="title" v-text="item.disName"></span>
											<div class="flex-sal">
												<img class="icon" src="../images/discover/huo.png">
												<span class="distance font-c-ad">{{item.distance | toFixed}}</span>
											</div>
											<div class="item-map">
												<img src="../images/map.png">
												<span class="font-12 font-c-ad">{{item.disDetails}}</span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<!-- 周边影院 -->
						<div>
							<div class="title-warpper">
								<span class="title">周边影院</span>
								<div class="more" @click="moreTap(4)">更多
									<span class="mui-icon mui-icon-forward"></span>
								</div>
							</div>
							<!-- 列表 -->
							<div class="list">
								<div class="list-item" v-for="item in discover.discoveryList_4" @click="detailClick(item)">
									<div class="item-warpper">
										<div class="item-image">
											<img :imgurl="item.path" src="../images/jiazai.gif">
										</div>
										<div class="item-desc">
											<span class="title" v-text="item.disName"></span>
											<div class="flex-sal">
												<img class="icon" src="../images/discover/huo.png">
												<span class="distance font-c-ad">{{item.distance | toFixed}}</span>
											</div>
											<div class="item-map">
												<img src="../images/map.png">
												<span class="font-12 font-c-ad">{{item.disDetails}}</span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div v-show="!isData" class="zanwu-style">
					<img src="../images/discover/zanwu.png">
					<p style="color: #5681a2;">附近暂无商家~</p>
				</div>
			</div>
		</div>
		<div class="bottom-bow"></div>
		<script src="../js/Width.js"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/mescroll.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue.js"></script>
		<script src="../js/swiper-4.3.5.min.js"></script>
		<script src="../js/Util.js"></script>
		<script src="../js/getDistance.js" type="text/javascript" charset="utf-8"></script>
		<script src="../data-js/discover.js"></script>
		<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
		<script type="text/javascript">
			mui.init()
			var mescroll;
			var mySwiper;

			var header = document.getElementById('header');

			mui.plusReady(function() {
				if (!mui.os.android) {
					FastClick.attach(document.body);
				}
				Util.StatusbarHeight('search')
				// Util.StatusbarHeight('fiexd')

				mescroll = new MeScroll("mescroll", {
					down: {
						auto: true,
						callback: downCallback
					},
					up: {
						auto: false,
						lazyLoad: {
							use: true,
							attr: 'imgurl',
							showClass: 'mescroll-lazy-in',
							delay: 500,
							offset: 200
						},
						onScroll: function(mescroll, y, isUp) {
							var height = 30
							if (y > height) {
								var opacity = y / 140
								opacity = opacity > 1 ? 1 : opacity
								header.style.opacity = opacity
							} else {
								header.style.opacity = 0
							}
						}
					}
				})

				header.addEventListener('tap', function() {
					mui.openWindow({
						url: 'discover/search.html',
						id: 'discover/search.html',
						waiting: {
							autoShow: false
						}
					})
				})
			})

			var app = new Vue({
				el: '#app',
				data: {
					isData: false,
					discover: {},
					opacityStyle: {
						opacity: 0
					},
					modules: [{
						title: '美食',
						imgSrc: '../images/discover/meishi.png'

					}, {
						title: '娱乐',
						imgSrc: '../images/discover/yule.png'
					}, {
						title: '健身',
						imgSrc: '../images/discover/jianshen.png'
					}, {
						title: '电影',
						imgSrc: '../images/discover/dianying.png'
					}]
				},
				filters: {
					toFixed: function(value) {
						var number = Number(value.toString().match(/^\d+(?:\.\d{0,2})?/));
						return number > 1 ? number + 'km' : number * 1000 + 'm'
					}
				},

				methods: {
					searchTap: function() {
						mui.openWindow({
							url: 'discover/search.html',
							id: 'discover/search.html',
							waiting: {
								autoShow: false
							}
						})
					},
					moreTap: function(type) {
						var title;
						switch (type) {
							case 1:
								title = "周边美食";
								break;
							case 2:
								title = "休闲娱乐";
								break;
							case 3:
								title = "游泳健身";
								break;
							case 4:
								title = "周边影院";
								break;
						}
						mui.openWindow({
							url: 'discover/discoverList.html',
							id: 'discoverList',
							styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
								titleNView: { // 窗口的标题栏控件
									titleText: title, // 标题栏文字,当不设置此属性时，默认加载当前页面的标题，并自动更新页面的标题         // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"
									titleSize: "17px", // 字体大小,默认17px
									backgroundColor: "#ffffff", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
									autoBackButton: true,
									splitLine: { // 标题栏控件的底部分割线，类似borderBottom
										color: "#eeeeee", // 分割线颜色,默认值为"#CCCCCC"  
										height: "1px" // 分割线高度,默认值为"2px"
									}
								}
							},
							waiting: {
								autoShow: false
							},

							extras: {
								type: type
							}
						})
					},
					detailClick: function(item) {
						mui.openWindow({
							url: 'discover/detail.html',
							id: 'detail.html',
							styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
								titleNView: { // 窗口的标题栏控件
									titleText: "商家详情", // 标题栏文字,当不设置此属性时，默认加载当前页面的标题，并自动更新页面的标题         // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"
									type: 'transparent',
									titleSize: "17px", // 字体大小,默认17px
									backgroundColor: "#ffffff", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
									autoBackButton: true
								}
							},
							waiting: {
								autoShow: false
							},
							extras: {
								detailID: item.disID
							},
						})
					}

				}
			})

			function downCallback() {
				plus.geolocation.getCurrentPosition(function(p) { // 获取自身定位方法 由于这个方法是异步加载的  所以请求只能放在这里面去执行,很操蛋
					document.getElementById('loading').style.display = 'none';
					var latitude = p.coords.latitude;
					var longitude = p.coords.longitude;
					if (mui.os.ios) {
						var data = wgs84togcj02(longitude, latitude)
						latitude = data[1];
						longitude = data[0];
					}
					latitude = Number(latitude.toString().match(/^\d+(?:\.\d{0,6})?/));
					longitude = Number(longitude.toString().match(/^\d+(?:\.\d{0,6})?/));
					mui.post(Util.HTTP + 'api/Discovery/GetDiscoveryHome', {
						disLng: longitude,
						disLat: latitude
					}, function(res) {
						if (res.code == 1001) {
							if (!res.data.discoveryList_1.length == 0 && !res.data.discoveryList_2.length == 0 && !res.data.discoveryList_3
								.length == 0 && !res.data.discoveryList_4.length == 0) {
								app.isData = true
							} else {
								app.isData = false
							}
							res.data.discoveryList_1 = setDistance(res.data.discoveryList_1, longitude, latitude);
							res.data.discoveryList_2 = setDistance(res.data.discoveryList_2, longitude, latitude);
							res.data.discoveryList_3 = setDistance(res.data.discoveryList_3, longitude, latitude);
							res.data.discoveryList_4 = setDistance(res.data.discoveryList_4, longitude, latitude);
							app.discover = res.data
							app.$nextTick(function() {
								mySwiper = new Swiper('.swiper-container', {
									loop: true,
									preventClicks: false, //默认true
									autoplay: {
										delay: 3000,
									}, //等同于以下设置
									// 如果需要分页器
									pagination: {
										el: '.swiper-pagination',
									}
								})
							})
							mescroll.endSuccess();
						} else {
							console.log(res.message)
						}
					})
				}, function(e) {
					alert('Geolocation error: ' + e.message);
				});
			}

			function setDistance(list, longitude, latitude) {
				list.forEach(function(item, index) {
					item.distance = getDistance(item.disLng, item.disLat, longitude, latitude)
				})
				return list
			}
		</script>
	</body>

</html>
